<template>
  <div class="jifen">
    <div class="h74"></div>
    <div class="aboutBanner">
      <img src="@/assets/images/jifenbg.jpg" alt="">
    </div>
    <div class="jifentit">
      <span>积分商城</span>
    </div>
    <br>
    <div class="shop">
      <ul class="clearfix">
        <li v-for="item in shoplist" :key="item.id"  @click="dialogEwmVisible = true">
          <a href="javascript:void(0);">
            <img :src="item.image" alt="">
            <p>
              {{ item.title }}<br>
              {{ item.jifen }}
            </p>
          </a>
        </li>
      </ul>
    </div>
    <el-dialog title="关注微信公众号" class="ewmdialog" :visible.sync="dialogEwmVisible" :lock-scroll="false">
      <img src="@/assets/images/ewm.jpg" alt="" width="344" height="344">
    </el-dialog>
    <button class="see-more">查看更多...</button>
    <Wfooter />
  </div>
</template>

<script>
import Wfooter from '@/components/Wfooter.vue'
import { mapState } from 'vuex'
export default {
  components: {
    Wfooter
  },
  computed: {
    ...mapState({
      shoplist: state => state.shoplist
    })
  },
  data () {
    return {
      dialogEwmVisible: false
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/style/layout.scss";
</style>
